<template>
  <div class="msg-block" :class="{ hide: hide }" ref="msg-block">
    <img :src="icon[type]" alt="" width="14" height="14" />
    <span>{{ msg }}</span>
  </div>
</template>
<script>
import successIcon from '@/assets/dashboard/msg/success.png'
import warningIcon from '@/assets/dashboard/msg/warning.png'
import errorIcon from '@/assets/dashboard/msg/error.png'
import infoIcon from '@/assets/dashboard/msg/info.png'
export default {
  name: 'MessageBox',
  components: {},
  props: {
    msg: {
      type: String,
      default: '提示信息',
    },
    type: {
      type: String,
      default: 'success',
    },
    duration: {
      type: Number,
      default: 2000,
    },
  },
  data() {
    return {
      icon: {
        success: successIcon,
        warning: warningIcon,
        error: errorIcon,
        info: infoIcon,
      },
      hide: false,
    }
  },
  computed: {
  },
  mounted() {
    setTimeout(()=>{
      this.hide = true
    }, this.duration)
    setTimeout(()=>{
      this.$destroy()
      this.$el.parentNode.removeChild(this.$el)
    }, this.duration + 1000)
  },
  methods: {
  },
};
</script>
<style scoped lang="less">
@keyframes msgIn {
  0% {
    opacity: 0;
    top: 50px;
  }
  100% {
    opacity: 100%;
    top: 64px;
  }
}
@keyframes msgOut {
  0% {
    opacity: 100%;
    top: 64px;
  }
  100% {
    opacity: 0;
    top: 50px;
  }
}
.msg-block {
  position: absolute;
  z-index: 99999999;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  background-color: #fff;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  top: 64px;
  opacity: 100%;
  span {
    margin-left: 9px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
  }
  animation: msgIn 0.5s ease-out forwards;
  &.hide {
    animation: msgOut 0.5s ease-out forwards;
  }
}
</style>
